<template>
	<view class="homePage">

		<view class="uni-padding-wrap home  padLeft padRig uni-common-mt bgSize">
			<!-- {{formData}} -->
			<view class="selectLang marBtm">

				<view class="locale-list">

					<picker @change="onLocaleChange" :value="applicationLocale" range-key="text" :range="locales">
						<view class="uni-input flex-box">

							<!-- <view class="locale-setting">{{$t('index.language')}}</view> -->
							<view class="slval">
								{{appLangtext}}
							</view>
							<text class="uni-bottom xs_padLeft">></text>
						</view>
					</picker>

				</view>
			</view>
			<form @submit="formSubmit" @reset="formReset">

				<view class="uni-form-item uni-column marTop flex-box center">
					<!-- <view class="title">{{$t("form.passnum")}}</view> -->

					<input class="uni-input" icon="search" v-model="formData.passnum" name="passnum"
						:placeholder="$t('form.enter')+$t('form.passnum')" />

					<button size="mini" class="clMar  search-btn" form-type="submit"
						type="warn">{{$t("form.submit")}}</button>
				</view>


			</form>
			<view class="uni-card xs_pad">
				<view class="carList marBtm" @click="goDetails(item)" v-for="(item,index) in list" :key="index">
					<view class="flex-box between xs_marBtm">
						<span class="xs_pad">
							<b>{{$t('form.name')}}：</b>{{item.name||'--'}}
						</span>

						<view class="rig xs_pad">
							<b>{{$t('form.arrive')}}：</b>{{item.arrive||'--'}}
						</view>
					</view>
					<view class="flex-box between xs_marBtm">
						<span class="xs_pad">
							<b>{{$t('form.fiynum')}}：</b>{{item.fiynum||'--'}}
						</span>
						<view class="rig xs_pad">
							<b>{{$t('form.from')}}：</b>{{item.from||'--'}}
						</view>
					</view>
				</view>
				<div v-show="!list.length"><no-data></no-data></div>
			</view>

		</view>
	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker.js"
	// import noData from '@/uni_modules/no-data/components/no-data/no-data.vue'
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		components: {
			// noData
		},
		data() {
			return {
				list: [],
				applicationLocale: 'zh-Hans',
				edit: true,
				passnum: "",
				formData: {},
				birth: "",
				endtime: '',
				gotime: '',
				startDate: getDate('start'),
				endDate: getDate('end'),
			}
		},
		computed: {

			appLangtext() {
				console.log("sd", this.locales.find(e => e.code == this.applicationLocale), this.locales, this
					.applicationLocale)
				return this.locales.find(e => e.code == this.applicationLocale) ? this.locales.find(e => e.code == this
					.applicationLocale).text : 'English'
			},
			locales() {
				return [
					// {
					//       text: this.$t('locale.auto'),
					//       code: 'auto'
					//     }, 
					{
						text: 'English',
						code: 'en'
					},
					{
						text: '中文',
						code: 'zh-Hans'
					}
					// {
					//   text: this.$t('locale.zh-hant'),
					//   code: 'zh-Hant'
					// },
					// {
					//   text: this.$t('locale.ja'),
					//   code: 'ja'
					// }
				]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
			// this.applicationLocale = uni.getStorageSync('lang')
			console.log("sdsd", this.$route.query.id)
			if (this.$route.query.id) {
				debugger
				this.edit = false
				this.getFormRes()

			}
			// this.formSubmit()		

		},

		methods: {
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/form/form?uid=' + item.codeToken + (item.id ? '&id=' + item.id : '')
				})
			},
			bindDateChange(e, k) {

				this.$set(this.formData, k, e.detail.value)
				// [k] = 
				console.log("bindDateChange", this.formData[k], e)
			},

			onLocaleChange(v) {
				let e = this.locales[v.detail.value || 0]
				console.log("onLocaleChange", v, e)
				if (this.isAndroid) {
					// uni.showModal({
					//   content: this.$t('index.language-change-confirm'),
					//   success: (res) => {
					//     if (res.confirm) {
					uni.setLocale(e.code);
					//     }
					//   }
					// })
				} else {
					uni.setLocale(e.code);
					uni.setStorageSync('lang', e.code)

					this.$i18n.locale = e.code;
				}
				this.$i18n.locale = e.code;
				// this.applicationLocale = v.detail.value;
			},
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [
					// "姓名应为1-3个字符"

					{
						name: "passnum",
						checkType: "string",
						checkRule: "1,10",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.passnum")
					}
				];
				//进行表单检查
				this.formData = {
					...e.detail.value
				};

				var checkRes = graceChecker.check(this.formData, rule);
				if (checkRes) {
					uni.showLoading()
					uni.request({
						method: "get",
						url: this.$api + "/system/datatable/getPassnum/" + this.formData.passnum,
						// data: {pageNum:1,pageSize:10,...this.formData},
						success: (res) => {
							// debugger
							if (res?.data && Array.isArray(res?.data)) {
								// uni.showModal({
								// 	content: "Submit success！"
								// })
								if (res.data) {
									console.log("this.$route.fullPath", this.$route.fullPath)
									if (res.data.length == 1) {
										uni.navigateTo({
											url: "/pages/form/form?id=" + res.data ? res.data[0]
												.id : ""
										})
									}
									if (!res.data.length) {
										uni.showToast({
											icon: 'none',
											title: "暂无数据"
										})
									}
									this.list = res.data
								}

								// this.edit = false
							} else {
								uni.showToast({
									icon: 'none',
									title: "网络出小差,暂无数据"
								})
							}

						},
						fail: (err) => {
							uni.showToast({
								icon: 'error',
								title: "网络出小差,暂无数据"
							})
						},

						complete() {
							uni.hideLoading()
						}
					})
					// uni.showToast({
					// 	title: "验证通过!",
					// 	icon: "none"
					// });
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
				this.formData = {
					...this.formData,
					gotime: '', //gotime
					endtime: '', //endtime
					birth: '', //birth
					passexpiry: '', //passnum
				}
				console.log('清空数据')
			}
		}
	}
</script>

<style>
	* {
		color: #fff;
	}

	.selectLang {
		padding-top: 50rpx;
	}

	.carList {
		border-radius: 10px;
		background: rgba(255, 255, 255, .8);

		* {
			color: #333;
		}

		b {
			color: #333;
		}
	}

	.uni-form-item .title {
		padding: 5rpx 8px;
		border-right: 1px solid rgb(228, 230, 237);
		color: var(--colorf);
		font-size: 25rpx;
		text-align-last: justify;
		min-width: 120rpx;

	}

	.uni-form-item {
		display: flex;
		align-items: center;
		border: 1px solid rgb(228, 230, 237);
		border-radius: 35rpx;
		margin-top: 125px;
		padding: 5rpx 5rpx;
	}

	.xsTitle {
		margin: 23rpx 0rpx 13rpx;
		font-size: 28rpx;
	}

	.uni-input {
		flex: 1;
		padding: 0px 10rpx 0 10rpx;
	}

	.search-btn {
		padding: 0 24rpx;
		height: 72rpx;
		min-width: 120rpx;
		line-height: 72rpx;
		border-radius: 36rpx;
	}

	.home {
		height: calc(100vh - 0px);
		height: 100vh;
		overflow-y: auto;
		background: url('http://206.237.4.16:3031/static/img/startup.9ecbf096.jpg')  no-repeat top;
		background-size: 100%;
	}

	.homePage {
		background:  rgba(255, 70, 31, 1);
		
	}
</style>